<template>
  <div class="list-content">
    <el-row type="flex" justify="space-between">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
        <el-form-item>
          <el-select filterable @change="getList(1)" v-model="formInline.roleIds" placeholder="请选择角色">
            <el-option
              v-for="item in roleOptions"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select clearable="" @change="getList(1)" v-model="formInline.organizationId" placeholder="请选择业主单位">
            <el-option label="全部业主单位" value=""></el-option>
            <el-option
              v-for="item in orgList"
              :key="item.organizationId"
              :label="item.shortName"
              :value="item.organizationId">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-select filterable @change="getList(1)" v-model="formInline.name" placeholder="请选择用户">
            <el-option
              v-for="item in nameOptions"
              :key="item.name"
              :label="item.name"
              :value="item.name=='全部用户'?'':item.name">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-input 
          v-model.trim="formInline.name" 
          placeholder="请输入姓名/电话号码"
          @keyup.enter.native="getList(1)"
          clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="form-search-btn" type="primary" @click="getList(1)">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="more-btns">
        <el-button type="primary" @click="addMailInfo()">新增</el-button>
      </div>
    </el-row>
    <el-table
      v-loading="loading"
      :data="tableData"
      ref="mainTable"
      style="width: 100%">
      <el-table-column
      label="序号"
      type="index"
      width="50">
      </el-table-column>
      <el-table-column
      prop="organizationName"
      label="业主单位">
      </el-table-column>
      <el-table-column
      prop="name"
      label="姓名">
      </el-table-column>
      <el-table-column
      prop="roleName"
      label="角色">
      </el-table-column>
      <el-table-column
      prop="phone"
      label="电话号码">
      </el-table-column>
      <el-table-column
      prop="email"
      label="邮箱">
      </el-table-column>
      <el-table-column
      prop="idCardNumber"
      label="身份证">
        <template slot-scope="scope">{{util.transID(scope.row.idCardNumber)}}</template>
      </el-table-column>
      <el-table-column 
      label="操作"
      width="250">
        <template slot-scope="scope">
          <el-button  @click="clickCallPhone(scope.row)" type="text" size="small" :disabled="scope.row.phone != '' ? false : true">电话呼叫</el-button>
          <span class="dividing-line">|</span>
          <el-button  @click="sendMsg(scope.$index, scope.row)" type="text" size="small" :disabled="scope.row.phone != '' ? false : true">短信</el-button>
          <span class="dividing-line">|</span>
          <el-button  @click="sendMail(scope.$index, scope.row)" type="text" size="small" :disabled="scope.row.email != '' ? false : true">邮件</el-button>
          <template v-if="scope.row.role == 1">
            <span class="dividing-line">|</span>
            <el-button  @click="editMail(scope.row)" type="text" size="small">编辑</el-button>
            <span class="dividing-line">|</span>
            <el-button  @click="deleteMail(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="sizeChange"
      @current-change="pageChange"
      :current-page="formInline.currentPageIndex"
      :page-sizes="[10, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formInline.currentPageTotal">
    </el-pagination>
    <el-dialog
      :close-on-click-modal="false"
      title="发送邮件"
      width="600px"
      top='10vh'
      v-if="mailDialogFalg"
      :visible.sync="mailDialogFalg"
      @close="closeMailDialog"
      v-dialogDrag>
      <mail-form :editInfo="mailInfo" :closeDialog="closeMailDialog" ></mail-form>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="发送短信"
      width="600px"
      top='10vh'
      v-if="msgDialogFalg"
      :visible.sync="msgDialogFalg"
      @close="closeMsgDialog"
      v-dialogDrag>
      <msg-form :editInfo="msgInfo" :closeDialog="closeMsgDialog" ></msg-form>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :title="(currentMailInfo.userId?'编辑':'新增')+'通讯录'"
      width="600px"
      top='10vh'
      v-if="addMailDialogFalg"
      :visible.sync="addMailDialogFalg"
      @close="closeAddNewDialog"
      v-dialogDrag>
      <add-mail-form v-if="addMailDialogFalg" :oldInfo="currentMailInfo" :closeDialog="closeAddNewDialog"></add-mail-form>
    </el-dialog>
  </div>
</template>

<script>
import { callPhone } from '@/api/callCenter'
import { getDictByCode} from '@/api/dic'
import { getPInfo, getOrgList } from '@/api/org'
import { delCUsedP } from '@/api/communicat'
import util from '@/utils/util'
import mailForm from '@/components/Common/SendMail'
import msgForm from '@/components/Common/SendMsg'
import AddMailForm from './Dialog/AddMailForm'

export default {
  name: 'AddressBook',
  props:['param'],
  components: { 
    mailForm,
    msgForm,
    AddMailForm
  },
  data () {
    return {
      orgList: [],
      formInline: {
        roleIds: '',
        name:'',
        orgIds: this.$store.state.userinfo.organizationIds,
        organizationId: this.$store.state.userinfo.isMuilUnitUser ? '' : this.$store.state.userinfo.org.id,
        // phone:'',
        currentPageSize: 10,
        currentPageIndex: 1,
        currentPageTotal: 0
      },
      util:util,
      isMuilUnitUser:this.$store.state.userinfo.isMuilUnitUser,
      accountName:this.$store.state.userinfo.accountName,
      defaultImg: this.GLOBAL.defaultImg,
      tableData: [],//表格数据
      roleOptions: [{dictKey: '',dictValue: "全部角色"}],
      // nameOptions: [{name: "全部用户"}],
      loading: false,
      mailInfo: {},
      mailDialogFalg: false,
      msgDialogFalg: false,
      addMailDialogFalg: false,
      currentMailInfo: {} // 当前编辑的通讯录信息
    }
  },
  created:function() {
      this.getOrgListData()
      //绑定下拉框
      getDictByCode({code: 5}).then((data)=>{
        this.roleOptions.push.apply(this.roleOptions,data.data.dictValueObj);
        this.getList()   
      })
      // getNameList({orgIds :this.formInline.orgIds}).then((data)=>{
      //   this.nameOptions.push.apply(this.nameOptions,data.data);
      // })
  },
  methods: {
    // 获取业主单位信息
    getOrgListData() {
      let that = this
      
      getOrgList({
          queryType: 0
      }).then(res => {
          if(res.status = 200) {
              that.orgList = res.data
          }
      })
    },
    sizeChange(val) {//页码切换
      this.formInline.currentPageIndex = 1;
      this.formInline.currentPageSize = val;
      this.getList() 
    },
    pageChange(val) {//翻页
      this.formInline.currentPageIndex = val;
      this.getList() 
    },
    getList(_pageIndex) {//获取列表
      if(_pageIndex){
        this.formInline.currentPageIndex = _pageIndex
      }
      this.loading =true;
      getPInfo({
        queryType:1,
        organizationId: this.formInline.organizationId,
        pageIndex: this.formInline.currentPageIndex -1,
        pageSize: this.formInline.currentPageSize,
        // phone: this.formInline.phone.trim(),
        name:this.formInline.name.trim(),
        roleIds:this.formInline.roleIds,
      }).then((result) => {
        this.formInline.currentPageTotal = result.total;
        this.tableData = result.data;
        this.loading =false;
      }) 
    },
    sendMsg(index,row){
      this.msgDialogFalg = true
      this.msgInfo = row||{}
    },
    sendMail(index,row){
      this.mailDialogFalg = true
      this.mailInfo = row||{}
    },
    closeMailDialog(refresh) {
      this.mailDialogFalg = false
    },
    closeMsgDialog(refresh) {
      this.msgDialogFalg = false
    },
    // 拨打电话
    clickCallPhone(row) {
      let that = this
      let parames = {
        phone: row.phone
      }

      if(row.name) {
        parames.customerUserName = row.name
      }
      if(row.organizationId) {
        parames.customerOrgId = row.organizationId
      }

      if(row.phone) {
        callPhone({
          phone: row.phone
        }).then(res => {
          if(res.status === 200) {
            that.$message({
              message: '呼叫成功！',
              type: 'success'
            })
          } else {
            that.$message.error(res.info);
          }
        })
      }
    },
    // 新增通讯录
    addMailInfo() {
      this.currentMailInfo = {}
      this.addMailDialogFalg = true
    },
    // 编辑通讯录
    editMail(row) {
      this.currentMailInfo = row
      this.addMailDialogFalg = true
    },
    // 删除通讯录
    deleteMail(row) {
      // 阻止事件冒泡
      event.stopPropagation()
      let that = this
      if (row) {
        that.$confirm('确认删除该通讯记录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          roundButton: true
        }).then(() => {
          delCUsedP({
            id: row.id
          }).then(res => {
            if(res.status === 200) {
              that.$message.success('删除成功!')
              that.getList(1)
            } else {
              that.$message.error(res.info)
            }
          })
          // 阻止事件冒泡
          event.stopPropagation()
        }).catch(() => {})
      }
    },
    // 关闭新增通讯录弹框
    closeAddNewDialog(flag) {
      this.addMailDialogFalg = false
      if(flag) {
        this.getList(this.currentMailInfo.userId?'':1)
      }
    }
  },
}
</script>